<template>
    <div id='id'>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <!-- 搜索 -->
            <el-row :gutter="20">
                <el-col :span="14">
                    <el-input placeholder="请输入内容" width="150px" v-model='queryInfo.query' clearable @clear=''>
                        <el-button slot="append" icon="el-icon-search" @click=''></el-button>
                    </el-input>
                </el-col>
            </el-row>

            <!-- 订单列表区域 -->
            <el-table :data="orderlist" style="width: 100%" border stripe>
                <el-table-column type='index' label="/"></el-table-column>
                <el-table-column prop="order_number" label="订单编号"></el-table-column>
                <el-table-column prop="order_price" label="订单价格" width='110px'></el-table-column>
                <el-table-column prop="pay_status" label="是否付款" width='120px'>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.pay_status==='0'" type="danger">未付款</el-tag>
                        <el-tag v-else type="primary">已付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货" width='120px'></el-table-column>
                <el-table-column prop="update_time" label="下单时间" width='200px'>
                    <template slot-scope="scope">
                        {{scope.row.update_time | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size='mini' @click='showBox(scope.row.order_id)'>
                        </el-button>
                        <!-- 物流信息按钮 -->
                        <template>
                            <el-button type="primary" icon="el-icon-location" size='mini' @click='showProgressBox'>
                            </el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" background>
            </el-pagination>
        </el-card>

        <!-- 展示/编辑订单对话框 -->
        <el-dialog title="修改地址" :visible.sync="orderDialogVisible" width="70%" @close='orderDialogClose'>
            <!-- 填写的表单 -->
            <el-form :model="orderForm" :rules="orderFormRule" ref="orderformRef" label-width="90px">
                <el-form-item label="省市区/县" prop='address1'>
                    <el-cascader :options="citydata" v-model="orderForm.address1"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop='address2'>
                    <el-input v-model="orderForm.address2"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="orderDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="orderUserInfo">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 物流进度的对话框 -->
        <el-dialog title="物流进度" :visible.sync="ProgressDialogVisible" width="70%" @close='ProgressDialogClose'>
            <!-- 填写的表单 -->
            <el-form :model="ProgressForm" :rules="ProgressFormRule" ref="ProgressformRef" label-width="90px">
                <!-- <el-form-item label="省市区/县" prop='address1'>
                    <el-cascader :options="citydata" v-model="orderForm.address1"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop='address2'>
                    <el-input v-model="orderForm.address2"></el-input>
                </el-form-item> -->
                123
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ProgressDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ProgressUserInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import citydata from './citydata.js'

    export default {
        name: 'order',
        data() {
            return {
                // 获取订单列表数据对象
                queryInfo: {
                    // 搜索关键字
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 5
                },
                // 所有订单列表的用户列表
                orderlist: [],
                // 所有的总数据条数
                total: 0,
                // 修改地址的隐藏与显示
                orderDialogVisible: false,
                // 查询到的订单信息对象
                orderForm: {
                    address1: [],
                    address2: ''
                },
                // 修改订单的校验规则
                orderFormRule: {
                    address1: [
                        { required: true, message: '请选择省市区/县', trigger: 'blur' },
                    ],
                    address2: [
                        { required: true, message: '请填写详细地址', trigger: 'blur' },
                    ]
                },
                citydata,
                // 修改物流进度的隐藏与显示
                ProgressDialogVisible: false,
                // 查询到的物流进度对象
                ProgressForm: {},
                progressInfo: {},
                // 修改订单的校验规则
                ProgressFormRule: {
                    address1: [
                        { required: true, message: '请选择省市区/县', trigger: 'blur' },
                    ],
                    address2: [
                        { required: true, message: '请填写详细地址', trigger: 'blur' },
                    ]
                },
            }
        },
        created() {
            this.getOrder()
        },
        methods: {
            // 获取所有的数据
            async getOrder() {
                const { data: res } = await this.$http.get('orders', { params: this.queryInfo })
                // console.log(res);
                if (res.meta.status !== 200) {
                    return this.$message.error("获取订单列表失败！")
                }
                //赋值
                this.orderlist = res.data.goods
                this.total = res.data.total
            },
            // 监听 pagesize 改变的事件
            handleSizeChange(newSize) {
                // console.log(newSize);
                this.queryInfo.pagesize = newSize
                // newSize 数据变化 重新发起数据请求 获取页面数据
                this.getOrder()
            },
            // 监听 页码值 改变的事件
            handleCurrentChange(newPage) {
                // console.log(newPage);
                this.queryInfo.pagenum = newPage
                // newPage 数据变化 重新发起数据请求 获取页面数据
                this.getOrder()
            },
            // 编辑订单 点击按钮
            async showBox(id) {
                // console.log(id);
                const { data: res } = await this.$http.get(`orders/${id}`)
                // console.log(res);
                if (res.meta.status !== 200) {
                    return this.$message.error("获取订单列表失败！")
                }
                //赋值
                this.orderForm = res.data
                // console.log(this.orderForm, '查询到的订单对象');
                this.orderDialogVisible = true
            },
            // 监听编辑订单对话框的关闭事件-表单的重置
            orderDialogClose() {
                this.$refs.orderformRef.resetFields()
            },
            // 编辑订单对话框的确定按钮
            orderUserInfo() {
                this.orderDialogVisible = false
            },
            // 物流信息按钮的点击事件
            async showProgressBox() {
                
                // const { data: res } = await this.$http.get('/kuaidi/1106975712662')
                // console.log(res);
                // if (res.meta.status !== 200) {
                //     return this.$message.error("获取物流信息列表进度失败！")
                // }
                // this.progressInfo = res.data
                this.$message.error('读取快递信息失效！')
                this.ProgressDialogVisible = false
                // console.log(this.progressInfo);
            },
            // 监听编辑物流进度对话框的关闭事件-表单的重置
            ProgressDialogClose() {
                this.$refs.ProgressformRef.resetFields()
            },
            // 物流进度 的确定按钮
            ProgressUserInfo() {

            }
        },
    }
</script>

<style scoped>
    .el-pagination {
        margin-top: 15px;
    }

    .el-table {
        margin-top: 15px;
    }

    .el-cascader {
        width: 100%;
    }
</style>